<template>
    <div class="background">
        <div class="map">
            <MapContainer></MapContainer>
        </div>
        <div>
            <div class="nav">
                <Nav></Nav>
            </div>
            <div class="container">
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>
            </div>
        </div>
    </div>
</template>
<script>
import MapContainer from '@/components/MapContainer/MapContainer.vue';
import Nav from '@/components/nav'
import drawMixin from '@/utils/drawMixin';
export default {
    name: '',
    mixins:[drawMixin],
    data() {
        return {

        };
    },
    methods: {

    },
    components: {
        MapContainer,
        Nav
    }
}
</script>
<style scoped lang="less">
.background {
    width: 1920px;
    height: 1080px;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    .nav {
        width: 100%;
        position: absolute;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;

    }

    .container {
        position: absolute;
        top: 0px;
        z-index: 12;
        width: 1920px;
        height: 1080px;
        background: url(@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/背景.png) no-repeat top center;
        background-size: 100% 100%;
        pointer-events: none;

    }
   
    ::v-deep .map #container {
        z-index: 11;
        position: absolute;
    }

}
</style>